<template>
  <!-- 编辑作业弹出 -->

  <edityc :val="val" :ct="ct" />

  <n-drawer v-model:show="val.drawer" class="work_drawer" placement="top">
    <n-drawer-content closable>
      <template #header> {{ val.dr.title ?? "{val.dr.title}" }} 的作业 </template>

      {{ ct.update_wd(val.workdata?.[val.v_data]?.video_data) }}
      <div style="margin-top: -12px"></div>

      <div class="work_videoimg">
        <div style="padding-top: 10px"></div>
        <div class="work_workdiv2" style="margin-top: -5px; display: flex">
          <template v-for="(item, key) in val.workdata?.[val.v_data]?.video_data">
            <!-- 高亮点击的作业 -->
            <div
              :class="key == val.v_key ? '_workclick' : undefined"
              @click="val.v_key = key"
              class="work_videodiv"
              v-if="item.user == val.v_user"
            >
              <n-icon size="12"> <Star /></n-icon>{{ item.sgj }} ({{ item.gj ?? 0 }}) [{{
                item.date
              }}] {{ item.bz?.length <= 0 || item.bz == null ? "无简介" : item.bz }}
            </div>
          </template>
        </div>

        <div
          class="dfc"
          style="justify-content: center; margin-left: 0.5rem; margin-right: 0.5rem"
        >
          <iframe
            style="width: 100%; min-height: 270px; box-shadow: 0 0 15px #000000"
            :src="`//player.bilibili.com/player.html?bvid=${
              val.wd?.[val.v_key]?.bv?.split('?')?.[0]
            }&p=${val.wd?.[val.v_key]?.fp}`"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
          >
          </iframe>
        </div>

        <div style="padding-top: 0.5rem; padding-left: 0.35rem">
          <n-space>
            <n-badge
              :value="val.wd?.[val.v_key]?.sgj ?? 0"
              @click="ct.gj(val.wd?.[val.v_key])"
            >
              <n-button size="small" strong secondary type="primary">
                <template #icon>
                  <i class="el-icon"
                    ><svg
                      width="36"
                      height="36"
                      viewBox="0 0 36 36"
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
                      ></path></svg
                  ></i>
                </template>
                点赞</n-button
              >
            </n-badge>

            <n-button size="small" secondary @click="ct.editwork(val.wd?.[val.v_key])">
              <template #icon
                ><el-icon> <Edit /> </el-icon
              ></template>
              <span>编辑</span>
            </n-button>

            <n-button
              size="small"
              secondary
              @click="ct.edit_yc(val.wd?.[val.v_key].icdata[0].i)"
            >
              <template #icon
                ><el-icon> <odometer /> </el-icon
              ></template>
              <span>异常</span>
            </n-button>

            <n-button size="small" secondary @click="ct.delwork(val.wd?.[val.v_key])">
              <template #icon
                ><el-icon> <Delete /> </el-icon
              ></template>
              <span>删除</span>
            </n-button>
          </n-space>
        </div>
        <div class="_workmbdiv">
          <div class="_workdiv">
            <img
              :src="val.img[val.wd?.[val.v_key]?.yq ?? '不填']"
              :class="`work_yqimg_${val.wd?.[val.v_key]?.yq ?? '不填'}`"
            />
            <div class="_workw">
              <template
                v-if="
                  val.wd?.[val.v_key]?.yq == '不填' || val.wd?.[val.v_key]?.yq == null
                "
                >未知</template
              >{{ val.wd?.[val.v_key]?.yq }}
            </div>
          </div>
          <div class="_workdiv" v-for="item in val.wd?.[val.v_key]?.icdata">
            <img :src="$cfg.function.ava(item.i)" />
            <div class="_workw">{{ item.w }}</div>
          </div>
        </div>
        <n-hr />
        <div style="width: 100%; margin-top: -0.45rem">
          <n-alert style="margin-left: 0.45rem; margin-right: 0.45rem" :show-icon="false"
            >{{ val.wd?.[val.v_key].user }}
            <a
              :href="`https://www.bilibili.com/video/${val.wd?.[val.v_key].bv}`"
              target="_blank"
              >(点击跳转到B站)</a
            ><br />
            <template v-if="val.wd?.[val.v_key].bz">
              <br />{{ val.wd?.[val.v_key].bz }}
            </template>
            <template v-if="val.wd?.[val.v_key].content">
              <br />
              <pre>{{ val.wd?.[val.v_key].content }}</pre>
            </template>
          </n-alert>
        </div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </div>

      <template #footer>
        <n-button @click="val.drawer = false">关闭窗口</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { defineAsyncComponent } from "vue";
const edityc = defineAsyncComponent(() => import("./edityc.vue"));
</script>
<script>
import { Edit, Delete, Odometer } from "@element-plus/icons";
import { Star } from "@vicons/ionicons5";
export default {
  components: {
    Odometer,
    Delete,
    Edit,
    Star,
  },
  props: {
    val: {
      type: Object,
      required: true,
    },
    ct: {
      type: Object,
      required: true,
    },
  },
};
</script>
